import { Component } from 'react';
import { Row, Col, Card } from 'antd';
import ReactECharts from 'echarts-for-react';

import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import styles from '../global.less'

class Home extends Component<any> {
	state = {
		message: [{
			title: 'Notice',
			option: [{
				title: 'Life is a journey, not the destination, but the scenery along the should be and the mood at the view.'
			}, {
				title: 'I’ll think of you every step of the way.'
			}, {
				title: 'Your happy passer-by all knows, my distressed there is no place hides.'
			}, {
				title: 'Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you.'
			}, {
				title: 'Your happy passer-by all knows, my distressed there is no place hides.'
			}]
		}, {
			title: 'Warn',
			option: [{
				title: 'When the whole world is about to rain, let’s make it clear in our heart together.'
			}, {
				title: 'I’ll think of you every step of the way.'
			}, {
				title: 'I lied when I said I didn’t like you. I lied when I said I didn’t care. I lie every time I try to tell myself I will never fall for you.'
			}, {
				title: 'Until you make peace with who you are, you’ll never be content with what you have.'
			}, {
				title: 'I’ll think of you every step of the way.'
			}]
		}]
	}

	echartsRender = () => {
		let num = ['line', 'bar', 'k']
		return (
			num.map((item, index) => {
				return (
					<Col span={8} key={index} >
						<Card hoverable>
							<ReactECharts option={this.getOption(item)} />
						</Card>
					</Col>
				)
			})
		)
	}
	getOption = (type: any) => {
		let option
		// siwtch..case中break跳出当前switch块，不影响switch语句之后其他代码的执行，return结束整个方法，无论switch块之后是否有其他代码需要执行
		// 此处的break和return的执行流程是一样的，但是使用return可以将option返回出去
		switch (type) {
			case 'line': option = {
				title: {
					text: 'Line',
					textStyle: {
						fontSize: 16,
						fontWeight: 'normal',
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: 'sale',
						type: 'line',
						data: [1000, 1500, 2000, 3000, 2500, 1800, 1200]
					}
				]
			};
				return option;
			case 'bar': option = {
				title: {
					text: 'Bar',
					textStyle: {
						fontSize: 16,
						fontWeight: 'normal',
					}
				},
				tooltip: {},
				xAxis: {
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {},
				series: [{
					name: 'sale',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20, 23]
				}]
			};;
				return option;
			default: option = {
				title: {
					text: 'Candlestick',
					textStyle: {
						fontSize: 16,
						fontWeight: 'normal',
					}
				},
				xAxis: {
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {},
				tooltip: {
					axisPointer: {
						type: 'cross'
					}
				},
				series: [{
					type: 'k',
					data: [
						[20, 34, 10, 38],
						[40, 35, 30, 50],
						[31, 38, 33, 44],
						[38, 15, 5, 42],
						[20, 34, 6, 40],
						[31, 30, 33, 48],
						[17, 34, 7, 30],
					]
				}]
			}
				return option;
		}
	}

	render() {
		const message = this.state.message
		return (
			<>
				<Row gutter={[8, 8]}>
					{ this.echartsRender() }
					{
						message.map((item, index) => {
							return (
								<Col span={12} key={item.title}>
									<Card title={item.title} hoverable extra={<a href="#">More...</a>}>
										{
											item.option && item.option.map((sub, subdex) => {
												return (
													<p key={subdex} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sub.title}</p>
												)
											})
										}
									</Card>
								</Col>
							)
						})
					}
				</Row>
				<div className={styles.descriptionBlock}>
					<p>Tips:</p>
					<p>1. Import echart & echarts-for-react</p>
					<p>2. Render multiple components</p>
					<p>3. The difference between 'return' & 'break' in switch...case</p>
				</div>
			</>
		);
	}
}

export default Home;
